<template>
  <basic-container>
    <header>
      <el-row>
        <el-col :span="10" align="start">{{ state.date ? '编辑' : '新增' }}快捷入口</el-col>
        <el-col :span="14" align="end">
          <el-button @click="$router.back()">取消退出</el-button>
          <el-button type="primary" @click="submitHandle">保存关闭</el-button>
        </el-col>
      </el-row>
    </header>
    <div class="container">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span> <span style="color: red">*</span> 快捷入口相关配置</span>
          </div>
        </template>
        <el-row>
          <el-col :span="8">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
              <el-form-item label="快捷入口名称" prop="option">
                <el-input v-model="form.name" placeholder="请填写快捷入口名称" style="width: 100%"> </el-input>
              </el-form-item>
              <el-form-item label="快捷跳转路径" prop="option">
                <el-select v-model="form.option" placeholder="请选择" style="width: 100%">
                  <el-option label="选项1" value="option1"></el-option>
                  <el-option label="选项2" value="option2"></el-option>
                  <el-option label="选项3" value="option3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="fileList" label="快捷入口图标" required>
                <el-row>
                <el-col :span="4">
                <div class="preview">
                  <img src="@/assets/images/business-system/lint-test.png" />
                </div>
              </el-col>
              <el-col :span="20">
                <el-upload
                  class="upload"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :on-success="handleUploadSuccess"
                  v-model:file-list="form.fileList"
                  :before-upload="beforeUpload"
                >
                <el-row>
                  <el-col :span="24" style="margin-bottom: 0px;">
                    <el-button type="text"> 重新上传 </el-button>
                  </el-col>
                  <el-col :span="24">
                    <span style="font-size: 12px;
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
font-weight: 400;
color: #989DA3;
line-height: 18px;">
                        上传要求：100*100px，格式为png，大小低于100kb
                      </span>
                  </el-col>
                </el-row>
                </el-upload>
              </el-col>

              </el-row>

              </el-form-item>
              <el-form-item prop="color" label="快捷入口色调" required>
                <avue-input-color placeholder="请选择颜色" v-model="form.color"></avue-input-color>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </basic-container>
</template>
<script setup>
// 提交方法
const router = useRouter();
const route = router.currentRoute.value;
const state = ref(JSON.parse(route.query.v));
console.log('查询参数值：', JSON.parse(route.query.v), state.date);

const formRef = ref(null); // 创建 ref 对象
const form = ref({
  fileList: '',
  option: '',
  color: 'rgba(255, 120, 0, 1)',
});
const rules = ref({
  fileList: [{ required: true, message: '请选择文件', trigger: 'change' }],
  option: [{ required: true, message: '请选择下拉框选项', trigger: 'change' }],
});
// 文件校验
// const imageUrl = ref(null);

// const handleUploadSuccess = (response, file) => {
//   // 上传成功后的回调函数
//   // 在这里可以获取上传后的图片地址，并更新到imageUrl变量中
//   // imageUrl.value = URL.createObjectURL(file.raw);
// };

const beforeUpload = (file) => {
  console.log('11', file);
  // 图片上传前的处理函数，例如限制文件大小等操作

  // 返回 true 表示允许上传
  // 返回 false 或 Promise.reject() 表示阻止上传
  // 返回 Promise.resolve(file) 或其他非 false 的值可以对上传的文件进行修改或转换

  // 示例：限制文件大小为100KB
  const maxSize = 100 * 1024; // 100KB
  if (file.size > maxSize) {
    console.log('文件大小超过限制');
    return false; // 阻止上传
  }
  return true; // 允许上传
};

const submitHandle = () => {
  console.log(formRef);
  formRef.value.validate((valid) => {
    // 使用 formRef.value
    if (valid) {
      // 表单验证通过，提交表单的逻辑
      console.log('表单验证通过');
      formRef.value.resetFields();
      console.log('填写内容');
      router.go(-1);
    } else {
      // 表单验证不通过，做相应处理
      console.log('表单验证不通过');
      return false;
    }
  });
};
</script>
<style lang="scss" scoped>
.upload {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  ul{
    display: none;
  }
}
.preview {
  width: 60px;
  height: 60px;
  margin-right: 50px;
}
.preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
header {
  .el-col-10 {
    background-color: #f0f2f5;
    font-size: 16px;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: bold;
    color: #25292c;
    line-height: 42px;
    height: 50px;
  }
  .el-col-14 {
    background-color: #f0f2f5;
    height: 50px;
    padding-right: 20px;
  }
}
.container {
  height: calc(100vh - 208px);
  .el-card {
    border: 1px solid #d9dce4 !important;
    margin: 15px;
    font-size: 14px;
    font-family: SourceHanSansSC-Medium, SourceHanSansSC;
    font-weight: 500;
    color: #25292c;
    line-height: 20px;
  }
  .box-card {
    width: 98%;
    p {
      margin-left: 20px;
      font-size: 14px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #50565d;
      line-height: 20px;
    }
  }
  .el-card__header {
    height: 60px;
    background: #f6f8fa !important;
    margin-bottom: 10px;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 23px;
  }
  .text {
    font-size: 14px;
    margin-left: 20px;
    font-size: 14px;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #50565d;
    line-height: 20px;
  }
}
.el-col-8 {
  margin-top: 20px;
}
::v-deep .el-upload-list .el-upload-list--text{
  display: none!important;
}
</style>
